<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">


    <el-row :gutter="10">
      <el-col :span="4">
        <el-image v-if="game.ico != null"
                  fit="contain"
                  :src="game.ico"></el-image>
        <el-image v-else
                  fit="contain"
                  :src="require('@/assets/images/collect/noData.png')"></el-image>
      </el-col>

      <el-col :span="20">
        <el-descriptions title="" :column="2" :size="size">
          <el-descriptions-item label="名称">{{game.name}}</el-descriptions-item>
          <el-descriptions-item label="游戏厂商">{{game.manufacturer}}</el-descriptions-item>
          <el-descriptions-item label="评分">
            <el-rate disabled v-model="game.grade"></el-rate>
          </el-descriptions-item>
          <el-descriptions-item label="游戏类型">
            <el-tag :size="tagSize">{{game.gameTypeName}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="发行时间">{{getFullDate(game.releaseTime)}}</el-descriptions-item>
          <el-descriptions-item label="录入时间">{{getTime(game.createTime)}}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              简介
            </template>
            {{game.briefIntroduction}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>

    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-document"></i>
              个人点评
            </template>
            {{game.comment}}
          </el-descriptions-item>
        </el-descriptions>

      </el-col>
    </el-row>

    <span slot="footer" class="dialog-footer">
       <el-button plain type="danger" @click="delGameByIdTips(game)">删除</el-button>
      <el-button plain type="warning" @click="toGameUpd(game)">编辑</el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

  import {getFullDate, getFullTime} from "../../utils/utils";
  import http from '@/utils/http'

  export default {
    name: "GameDetailed",
    data(){
      return {
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '详情',
        },
        // 游戏信息
        game: {
          name: null,
          manufacturer: null,
          briefIntroduction: null,
          grade: null,
          comment: null,
          releaseTime: null,
          ico: null,
          gameTypeName: null,
          createTime: null,
        },
        // 列表的尺寸
        size: 'small',
        // tag 的大小
        tagSize: 'small',
      }
    },
    methods: {
      /**
       * 跳转游戏编辑页面
       */
      toGameUpd(){
        this.$emit('openUpdGame', this.game)
        this.tableConfig.show = false
      },
      /**
       * 删除提示
       */
      delGameByIdTips(row){
        this.$confirm('是否删除游戏, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delGameById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 物理删除游戏
       * @param row
       */
      delGameById(row){
        http.post("/game/delGameById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.$emit('getGameListPage', null)
          this.$message.success("删除成功");
          // 关闭弹出框
          this.tableConfig.show = false

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 打开游戏详情
       * @param obj 游戏详情
       */
      openGameDetailed(obj){
        this.game = obj
        this.tableConfig.show = true
        this.$store.commit('navigationListChange', ['我的游戏', '详情'])
      },
      /**
       * 转换时间戳为时间格式
       */
      getTime(item){
        return getFullTime(item)
      },
      /**
       * 转换时间戳为指定格式
       * @param item 时间戳
       * @return {string} yyyy-MM-dd
       */
      getFullDate(item){
        return getFullDate(item);
      }
    }
  }
</script>

<style scoped>

</style>
